<template>
  <view class="page-head">

    <Head title="总量变动记录" color="#ffffff"></Head>

    <view class="orders">
      <view class="order" v-for="item in list" :key="item.id">
        <!-- {{ item }} -->
        <view class="line">
          <!-- <text>{{ item.id }}</text> -->
          <text>总量</text>
          <!-- <text>{{ item.createTime }}</text> -->
        </view>
        <view class="line">
          <text>{{ item.inOut ? "支出" : "收入" }}</text>
          <text>详情:{{ item.detailed }}</text>
        </view>
        <view class="line">
          <text>余额:{{ item.balance }}</text>
          <text>金额:{{ item.amount }}</text>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import Head from "@/components/Head/index";
import { transferRecord } from "@/api/api";
export default {
  components: {
    Head,
  },
  props: {},
  data() {
    return {
      list: [],
      pageNum: 1,
      pageSize: 10,
    };
  },
  computed: {},
  watch: {},
  onLoad() {
    this.getData();
  },
  onReachBottom() {
    if (this.total > this.list.length) {
      this.pageNum = this.pageNum + 1;
      this.getData();
    } else {
      this.$u.toast("没有更多了");
    }
  },
  methods: {
    async getData() {
      let res = await transferRecord({
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        type: 3
      });

      if (res.code === 200) {
        this.list = res.data.records;
        this.total = res.data.total;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.orders {
  width: 720rpx;

  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: center;

  .order {
    width: 720rpx;
    min-height: 250rpx;

    margin: 24rpx 0;

    box-sizing: border-box;
    padding: 24rpx;

    display: flex;
    flex-flow: column nowrap;

    justify-content: space-between;
    align-items: flex-start;

    color: #202737;
    background-color: #ffffff;
    border-radius: 24rpx;

    .line {
      width: 100%;

      display: flex;
      flex-flow: row nowrap;

      justify-content: space-between;
      align-items: center;
    }
  }
}
</style>
